import React, { Component, createContext, useContext } from 'react'


// 1. 创建一个上下文对象
const TitleContenxt = createContext()


class First extends Component {
    // 3.1 通过静态属性的方式接受
    // static contextType = TitleContenxt

    render() {

        console.log(this.context);
        return (
            <div>
                <h3>First - {this.context.title} </h3>

                <Son />
            </div>
        )
    }
}
// 3.2 通过组件名的方式来接收
First.contextType = TitleContenxt

function Son(props) {
    // 3.2 通过 hooks 的方式进行使用
    const titlecontext = useContext(TitleContenxt)


    // console.log(props);
    return (
        // 3.1 函数式组件通过 TitleContenxt.Consumer 来接收数据
        // <TitleContenxt.Consumer>
        //     {
        //         (value) => {
        //             return <h6> Son - {value.title} </h6>
        //         }
        //     }
        // </TitleContenxt.Consumer>
        <h6> Son - {titlecontext.title} </h6>
    )
}
// 在函数组件中无法使用 contextType
// Son.contextType = TitleContenxt


export default class App extends Component {

    state = {
        title: '辣条'
    }

    render() {
        return (
            <div>
                <h1>App - {this.state.title} </h1>
                {/* 2. 使用上下文对象中的 Provider，配合 value 属性进行后代传值 */}
                <TitleContenxt.Provider value={{
                    name: '高举',
                    title: this.state.title
                }}>
                    <First />
                </TitleContenxt.Provider>

            </div>
        )
    }
}
